<template>
    <div class="departSelect">
        <div class="receivers">发送的对象:
            <div class="receiverList">{{ receiverNames }}</div>
        </div>
        <div class="selectPanel">
            <van-sidebar v-model="active" class="selectCol1" @change="handleTopGroupChange">
                <van-sidebar-item :title="g.groupName" v-for="g in topGroups" />                
            </van-sidebar>
            <van-tree-select
                class="selectCol2"
                v-model:active-id="activeIds"
                v-model:main-active-index="activeIndex"
                @click-item="handleClickLeader"
                :items="treeItems"
                />
        </div>

        <div class="sendOptions">
            <van-checkbox v-model="sendSms" shape="square" @change="handleSendSmsChange">发送短信</van-checkbox>
        </div>
        
    
    </div>
</template>



<script lang="ts" setup>
import type{ LeaderSelectResult } from '@/types';
import { getLeaderGroups } from '@/api/oaGroupApi';
import type { OaGroup} from '@/types/workflow';
import type { TreeSelectItem, TreeSelectChild } from 'vant';
import { onMounted, ref ,watch,defineProps, computed} from 'vue';
import { removeDuplicates } from '@/util/arrayTool';

interface LeaderSelectProp{
    modelValue:LeaderSelectResult
}

const active = ref(0)

const topGroups = ref<OaGroup[]>([]);
const sendSms = ref(false)

const emiter = defineEmits(["update:modelValue"])
const {modelValue = null} = defineProps<LeaderSelectProp>();

const activeIds = ref([]);
const activeIndex = ref(0);
const treeItems = ref<TreeSelectItem[]>([]);

const receiverNames = computed(()=>{
    var names = ''
    var nameList:string[] = [];

    activeIds.value.forEach((staffId:string)=>{

        topGroups.value.forEach((topGroup)=>{
            topGroup.children.forEach((leaders)=>{
                leaders?.children?.forEach(element => {
                    if(element.groupId == staffId){
                        nameList.push(element.groupName);                        
                    }
                });
            })
        })        
    })

    nameList = removeDuplicates(nameList);
    nameList.forEach((ele)=>{
        names += ele + ";";
    })   

    return names;
});

//属性发生变化后重新计算
//注意这里监听的是getter函数，不能直接监听某个值，可以监听ref，reactive对象


watch(()=>modelValue,()=>{
    if(modelValue == null || modelValue.list.length == 0 ){        
        activeIds.value = [];                
    }
})

 
onMounted(()=>{
    initDepartList();
})

 
const handleSendSmsChange = ()=>{
    emitUpdateModel();
}

const handleClickLeader = ()=>{
    emitUpdateModel();
}
watch(activeIds,()=>{
 //   if(isNotifyUpldateModel)emitUpdateModel();
})

const emitUpdateModel = ()=>{
    console.log('update model:'+sendSms.value+","+activeIds.value)
    emiter('update:modelValue',{        
        list:activeIds.value,
        sendSms:sendSms.value
    });
}

const initDepartList = async ()=>{
    const leaderGroups = await  getLeaderGroups();    
    if(leaderGroups.data){
        topGroups.value = leaderGroups.data;
    }
    
    handleTopGroupChange(0);
    
}

const handleTopGroupChange = (index:number)=>{
    let childItems = topGroups.value[index].children;
    let temp = getGroupChildren(childItems);
    treeItems.value = temp;
    activeIndex.value = 0;
}

//
const getGroupChildren = (childItems:OaGroup[])=>{
    if(!childItems || childItems.length == 0) return [];

    let temp:TreeSelectItem[]  = [];
    for(var i=0;i<childItems.length;i++){
        var tempChild = childItems[i];
        temp.push({
            text:tempChild.groupName,            
            children:getTreeSelectItemChildren(tempChild.children)
        })
    }
    return temp;
}

const getTreeSelectItemChildren = (childItems:OaGroup[])=>{
    if(!childItems || childItems.length == 0) return [];

    let temp:TreeSelectChild[]  = [];
    for(var i=0;i<childItems.length;i++){
        var tempChild = childItems[i];
        temp.push({
            text:tempChild.groupName,
            id:tempChild.groupId
        })
    }
    return temp;
} 

 
    
    
</script>

<style lang="less" scoped>
.departSelect{
    width: 100%;
    .receivers{
        margin-bottom: 20px;
        display: flex;

        .receiverList{
            width: 100px;
            flex-grow: 1;
            padding-left: 10px;
            color:#1989fa;
        }
    }
    .selectDepartTitle{
        text-align: center;
        padding-top: 20px;
        padding-bottom: 4px;
    }

    .selectPanel{
        display: flex;
        border: 1px solid #dfdfdf;
        padding: 4px;

        .selectCol1{
            width:100px;
            flex-grow: 1;
        }

        .selectCol2{
            width: 200px;
            flex-grow: 2;
        }
    }

    .sendOptions{
        margin-top: 10px;
        margin-bottom: 20px;
    }
}
</style>